<template>
  <div class="myTopicList">
    <el-form @submit.native.prevent size="small" :inline="true">
      <el-form-item style="float: right; margin-bottom: 10px">
        <el-button
          v-preventReClick
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete"
          size="medium"
          :disabled="multiple"
          >批量删除</el-button
        >
      </el-form-item>
      <el-form-item style="float: right; margin-bottom: 10px">
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-plus"
          @click="showTopicListDialog"
          size="medium"
          >从试题库选择</el-button
        >
      </el-form-item>
      <el-form-item style="float: right; margin-bottom: 10px">
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          size="medium"
          v-hasPermi="['exam:topic:add']"
          >新增试题</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="topicList"
      :show-overflow-tooltip="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        min-width="5%"
      />
      <el-table-column
        label="题型"
        align="center"
        prop="topicType"
        min-width="5%"
      >
        <template slot-scope="scope">
          {{ returnTopicType(scope.row.topicType) }}
        </template>
      </el-table-column>
      <el-table-column
        label="知识点"
        align="center"
        prop="categoryName"
        min-width="7%"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        label="题干"
        align="center"
        prop="content"
        min-width="25%"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="答案"
        align="center"
        prop="answer"
        min-width="15%"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="难度"
        align="center"
        prop="difficulty"
        min-width="5%"
      >
        <template slot-scope="scope">
          {{ returnDifficulty(scope.row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        min-width="10%"
      >
        <template slot-scope="scope">
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['exam:topic:edit']"
            >修改</el-button
          >
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['exam:topic:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList(0)"
    />
    <!-- 勾选添加试题对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="选择试题"
      :visible.sync="showTopicList"
      width="1200px"
      append-to-body
    >
      <div class="topicListDiv">
        <TopicList
          :taskId="taskId"
          :parentopen="showTopicList"
          :isOfflineExam="isOfflineExam"
          :propsCategoryId="propsId"
          ref="myTopicList"
          :hiddenEdit="true"
          @handleSelect="handleAddTopics"
        />
      </div>
      <div
        style="width: 100%; display: flex; justify-content: center"
        slot="footer"
      >
        <el-button v-preventReClick @click="showTopicList = false">
          关 闭
        </el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改试题对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="topicEditTitle"
      :visible.sync="showTopicEdit"
      width="70vw"
      append-to-body
    >
      <TopicForm
        :needTitleId="false"
        :isOfflineExam="isOfflineExam"
        :propsCategoryId="propsId"
        @cancel="cancelTopicEdit"
        ref="myTopicForm"
        @handleClose="closeTopicEdit"
      />
    </el-dialog>
  </div>
</template>
<script>
import TopicList from "./TopicList";
import TopicForm from "./TopicForm";
import {
  getContainerTopic,
  choiceContainerTopic,
  delContainerTopic,
} from "@/api/exam/examPaperContainer";
import { getTopicCategoryTree } from "@/api/exam/topicCategory";

export default {
  name: "ContainerEdit",
  dicts: ["topic_type", "topic_difficulty"],
  props: {
    propsId: {
      type: [String, Number],
      required: false,
    },
    taskId: {
      type: [String, Number],
      required: false,
    },
    isOfflineExam: {
      type: [Boolean],
      required: false,
    },
  },
  components: {
    TopicList,
    TopicForm,
  },
  created() {
    this.getCategoryTree(1);
  },
  data() {
    return {
      titleId: "",
      // 容器Id
      containerId: null,
      // 遮罩层
      loading: true,
      // 是否显示试题列表页面
      showTopicList: false,
      // 是否显示试题编辑页面
      showTopicEdit: false,
      // 试题编辑页面标题
      topicEditTitle: "添加试题",
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 试题表格数据
      topicList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: null,
        topicType: null,
        difficulty: null,
        titleId: 0,
      },
      //分类树
      categoryTree: [],
    };
  },
  methods: {
    handleAddTopics(topicIds, titleId, containerId, loading) {
      // this.showTopicList = false;
      choiceContainerTopic(containerId, topicIds)
        .then((response) => {
          if (loading) {
            loading.close();
          }
          this.$message.success({ message: "添加成功", showClose: true });
          this.getList(containerId);
          this.$refs.myTopicList.loadTopicList(0, this.queryParams.containerId);
        })
        .catch((error) => {
          if (loading) {
            loading.close();
          }
        });
    },
    cancelTopicEdit() {
      this.showTopicEdit = false;
      this.getCategoryTree(1);
    },
    closeTopicEdit() {
      getContainerTopic(this.queryParams.containerId, this.queryParams).then(
        (response) => {
          this.topicList = response.rows;
          this.total = response.total;
        }
      );
      this.showTopicEdit = false;
      this.getCategoryTree(1);
    },
    getCategoryTree(categoryId) {
      console.log(5555);
      getTopicCategoryTree(categoryId).then((response) => {
        this.categoryTree = response.data;
      });
    },
    /** 查询试题列表 */
    getList(containerId, titleId) {
      this.titleId = titleId;
      console.log("查询试题列表", containerId, titleId);
      this.loading = true;
      if (containerId != null && containerId > 0) {
        this.$set(this.queryParams, "containerId", containerId);
      } else {
        containerId = this.queryParams.containerId;
      }
      getContainerTopic(containerId, this.queryParams).then((response) => {
        this.topicList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**选择分类 */
    handleChange(value) {
      this.queryParams.categoryId = value[value.length - 1];
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(0);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      console.log(ids, this.queryParams.containerId);
      delContainerTopic(this.queryParams.containerId, ids).then((response) => {
        this.$message.success({ message: "删除成功", showClose: true });
        this.getList(this.queryParams.containerId);
      });
    },
    /** 新增按钮 */
    handleAdd() {
      this.showTopicEdit = true;
      this.topicEditTitle = "添加试题";
      this.$nextTick(() => {
        this.$refs.myTopicForm.reset(0, this.queryParams.containerId);
      });
    },
    /** 修改按钮 */
    handleUpdate(row) {
      this.showTopicEdit = true;
      this.title = "修改试题";
      const id = row.id || this.ids;
      this.$nextTick(() => {
        this.$refs.myTopicForm.getTopicInfo(
          id,
          this.titleId,
          this.queryParams.containerId
        );
      });
    },
    /** 多选框选中数据*/
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /**返回题型 */
    returnTopicType(type) {
      return this.dict.type.topic_type.find((item) => item.value === type + "")
        .label;
    },
    /**返回难度 */
    returnDifficulty(difficulty) {
      return this.dict.type.topic_difficulty.find(
        (item) => item.value === difficulty + ""
      ).label;
    },
    /** 打开试题选择列表 */
    showTopicListDialog() {
      this.showTopicList = true;
      this.$nextTick(() => {
        this.$refs.myTopicList.loadTopicList(0, this.queryParams.containerId);
      });
    },
  },
};
</script>

<style scoped>
.topicListDiv {
  max-height: 85vh;
  min-height: 75vh;
  overflow: auto;
}

.topicListDiv::-webkit-scrollbar {
  width: 10px;
}

.topicListDiv::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 5px;
}

::v-deep .el-tooltip__popper {
  font-size: 14px;
  max-width: 550px;
  overflow: hidden;
}

.myTopicList {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
</style>
